<template>
    <div class="map-container">
        <div id="container" :style="`height: ${windowInsets.height}px`"></div>

    </div>
</template>

<script>
import { mapState } from 'vuex'
import AMapLoader from '@amap/amap-jsapi-loader';
import ICON from "@/assets/icons";
import mapConfig from "@/mapConfig";
let AMap = null
export default {
    data: () => {
        return {
            map:null,
        }
    },
    created() {
        this.contentHeight = window.innerHeight
        AMapLoader.load({
            key: mapConfig.key, // 申请的 web js 服务的 key
            version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [
                // 'AMap.ToolBar', // 缩放按钮
                'AMap.Scale', // 比例尺
                'AMap.Geolocation', // 定位
            ],
        }).then(map => {
            AMap = map
            const base_url = 'http://127.0.0.1:8800/'
            const layers = [new AMap.TileLayer({
                getTileUrl: function (x, y, z) {
                    return `${base_url}laianMap/${z}/${x}/${y}/tile.png`;
                },
                opacity: 1,
                zIndex: 99,
            })]
            this.map = new AMap.Map("container", {
                zoom: 15,
                features: ["bg", "building", "road"],
                zooms: [13, 19],
                center: [118.41441538010645, 32.42661115933597],
                layers: layers,
                showIndoorMap: false
            });

            console.log(this.map,'created');
            this.init(this.map)
            this.map.addControl(new AMap.Scale())

            // // 定位
            // let geolocation = new AMap.Geolocation({
            //     // 是否使用高精度定位，默认：true
            //     enableHighAccuracy: true,
            //     // 设置定位超时时间，默认：无穷大
            //     timeout: 10000,
            //     // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            //     buttonOffset: new AMap.Pixel(10, 20),
            //     //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            //     zoomToAccuracy: true,
            //     //  定位按钮的排放位置,  RB表示右下
            //     buttonPosition: 'RB'
            // })

            // geolocation.getCurrentPosition(MY_POSITION)

            // 地图选点操作
            this.map.on('click', res => {
                this.positionPicked = {
                    lng: res.lnglat.lng,
                    lat: res.lnglat.lat
                }
            })
        }).catch(e => {
            console.log(e);
        })


    },
    computed: {
        ...mapState(['windowInsets'])
    },
    methods: {
        init(map) {
            console.log(map,"mounted");
            // var path = [];
            // path.push([121.608693, 29.913687]);
            // path.push([121.615324, 29.914654]);
            // path.push([121.612749, 29.916198]);
            let path = [[118.384246, 32.437532], [118.414561, 32.439307], [118.417291, 32.445464]]
            map.plugin(["AMap.DragRoute"], function () {
              let  route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
                route.search(); //查询导航路径并开启拖拽导航
                console.log(path,route, 'path');
                route.on('complete', function () {
                    console.log(route.getRoute(),"complete");
                })
            });
        }
    },
    mounted() {
      
    }
}
</script>